<template>
  <el-dialog
    title="提示"
    :visible="value"
  >
    <div v-if="loading">加载中......</div>
    <el-tree v-else ref="permissionRef" :default-checked-keys="permIds" default-expand-all node-key="id" :data="data" :props="defaultProps" show-checkbox />
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('input', false)">取 消</el-button>
      <el-button type="primary" @click="submitPermisstionTmp">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { transfromListToTree } from '@/utils'
import { getPermissionListRequest } from '@/api/permission'
import { assignPremRequest } from '@/api/role'
export default {
  name: 'AssignPermissionCom',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    currentId: {
      type: Number,
      default: null
    },
    permIds: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      loading: true
    }
  },
  created() {
    this.getPermissionList()
  },
  methods: {
    async getPermissionList() {
      const res = await getPermissionListRequest()
      console.log(res, 8989)
      // 平铺数据转换为tree树形数据--- 带有children
      this.data = transfromListToTree(res.data, 0)
      this.loading = false
    },
    async submitPermisstionTmp() {
      // 关闭对话框
      this.$emit('input', false)
      await assignPremRequest({
        id: this.currentId,
        permIds: this.$refs.permissionRef.getCheckedKeys()
      })
    }
  }
}
</script>
